import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
import { useNavigate } from 'react-router-dom';
import { 
  Upload, FileText, ChevronDown, ChevronUp, Search, Filter, 
  Plus, Edit, Trash2, Check, X, AlertTriangle, Download, 
  ArrowUpCircle, ArrowDownCircle, Settings, LayoutDashboard
} from 'lucide-react';
import { 
  Button, Tooltip, Dialog, DialogTitle, DialogContent, 
  DialogActions, TextField, Switch, FormControlLabel,
  Snackbar, Alert
} from '@mui/material';

// 样式组件
const Container = styled.div`
  padding: 24px;
  background-color: #f5f5f5;
  min-height: 100vh;
`;

const ContentWrapper = styled.div`
  background-color: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
`;

const PageHeader = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e0e0e0;
`;

const PageTitle = styled.h1`
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin: 0;
`;

const ControlsBar = styled.div`
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 24px;
`;

const SearchBar = styled.div`
  position: relative;
  width: 300px;
`;

const SearchInput = styled.input`
  width: 100%;
  padding: 10px 16px 10px 40px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.3s ease;

  &:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
  }
`;

const SearchIcon = styled(Search)`
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  width: 16px;
  height: 16px;
`;

const UploadButton = styled(Button)`
  && {
    background-color: #28a745;
    color: white;
    text-transform: none;
    font-weight: 500;
    padding: 10px 20px;

    &:hover {
      background-color: #218838;
    }
  }
`;

const FilterButton = styled(Button)`
  && {
    border: 1px solid #ddd;
    color: #666;
    text-transform: none;
    font-weight: 500;
    padding: 10px 16px;
    display: flex;
    gap: 6px;
    align-items: center;

    &:hover {
      background-color: #f8f9fa;
    }
  }
`;

const TableContainer = styled.div`
  overflow-x: auto;
  margin-bottom: 24px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
`;

const Table = styled.table`
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
`;

const TableHeader = styled.thead`
  background-color: #f8f9fa;
`;

const TableHeaderCell = styled.th`
  padding: 16px;
  text-align: left;
  font-weight: 600;
  color: #333;
  border-bottom: 2px solid #e0e0e0;
  white-space: nowrap;
`;

const TableRow = styled.tr`
  transition: background-color 0.2s ease;

  &:hover {
    background-color: #f8f9fa;
  }

  &.highlight {
    background-color: #fff3cd;
  }
`;

const TableCell = styled.td`
  padding: 16px;
  border-bottom: 1px solid #e0e0e0;
  vertical-align: middle;
`;

const StatusBadge = styled.span`
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  background-color: ${props => props.isActive ? '#d4edda' : '#f8d7da'};
  color: ${props => props.isActive ? '#155724' : '#721c24'};
`;

const ActionButton = styled.button`
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  margin: 0 2px;
  border-radius: 4px;
  color: ${props => props.color || '#666'};
  transition: all 0.2s ease;

  &:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: ${props => props.hoverColor || '#333'};
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
`;

const Pagination = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  font-size: 14px;
`;

const PaginationInfo = styled.span`
  color: #666;
`;

const PaginationControls = styled.div`
  display: flex;
  gap: 8px;
`;

const PaginationButton = styled.button`
  padding: 8px 12px;
  border: 1px solid #ddd;
  background-color: ${props => props.active ? '#007bff' : 'white'};
  color: ${props => props.active ? 'white' : '#333'};
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;

  &:hover:not(:disabled) {
    background-color: ${props => props.active ? '#0056b3' : '#f8f9fa'};
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
`;

const EmptyState = styled.div`
  text-align: center;
  padding: 60px 20px;
  color: #666;
`;

const EmptyStateIcon = styled.div`
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.3;
`;

const EmptyStateTitle = styled.h3`
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #333;
`;

const EmptyStateDescription = styled.p`
  font-size: 14px;
  margin-bottom: 20px;
`;

// 主要组件
const VersionManagement = () => {
  const navigate = useNavigate();
  
  // 状态管理
  const [versions, setVersions] = useState([]);
  const [filteredVersions, setFilteredVersions] = useState([]);
  const [searchQuery, setSearchQuery] = useState('');
  const [activeFilter, setActiveFilter] = useState('all');
  const [currentPage, setCurrentPage] = useState(1);
  const [itemsPerPage] = useState(10);
  const [showUploadDialog, setShowUploadDialog] = useState(false);
  const [showEditDialog, setShowEditDialog] = useState(false);
  const [selectedVersion, setSelectedVersion] = useState(null);
  const [notification, setNotification] = useState({ show: false, message: '', severity: 'success' });
  
  // 新/编辑版本表单状态
  const [formData, setFormData] = useState({
    versionNumber: '',
    description: '',
    isActive: false,
    forceUpdate: false,
    downloadUrl: '',
    fileSize: '',
    releaseDate: new Date().toISOString().split('T')[0]
  });

  // 模拟数据加载
  useEffect(() => {
    // 在实际应用中，这里会从API获取数据
    const mockVersions = [
      {
        id: '1',
        versionNumber: '2.3.5',
        description: '修复了面相分析模块的识别错误，优化了手相分析算法',
        isActive: true,
        forceUpdate: false,
        downloadUrl: 'https://example.com/app-v2.3.5.apk',
        fileSize: '45.2 MB',
        releaseDate: '2023-11-15',
        downloadCount: 1254,
        platform: 'Android'
      },
      {
        id: '2',
        versionNumber: '2.3.4',
        description: '添加了新的八字分析报告模板，改进了用户界面',
        isActive: false,
        forceUpdate: false,
        downloadUrl: 'https://example.com/app-v2.3.4.apk',
        fileSize: '44.8 MB',
        releaseDate: '2023-11-01',
        downloadCount: 892,
        platform: 'Android'
      },
      {
        id: '3',
        versionNumber: '2.3.3',
        description: '修复了iOS 17兼容性问题，提升了应用性能',
        isActive: true,
        forceUpdate: true,
        downloadUrl: 'https://example.com/app-v2.3.3.ipa',
        fileSize: '52.1 MB',
        releaseDate: '2023-10-20',
        downloadCount: 2105,
        platform: 'iOS'
      },
      {
        id: '4',
        versionNumber: '2.3.2',
        description: '添加了暗黑模式支持，修复了已知bug',
        isActive: false,
        forceUpdate: false,
        downloadUrl: 'https://example.com/app-v2.3.2.apk',
        fileSize: '44.5 MB',
        releaseDate: '2023-10-05',
        downloadCount: 658,
        platform: 'Android'
      },
      {
        id: '5',
        versionNumber: '2.3.1',
        description: '优化了人脸识别速度，改进了报告分享功能',
        isActive: false,
        forceUpdate: false,
        downloadUrl: 'https://example.com/app-v2.3.1.ipa',
        fileSize: '51.8 MB',
        releaseDate: '2023-09-18',
        downloadCount: 942,
        platform: 'iOS'
      }
    ];
    
    setVersions(mockVersions);
    setFilteredVersions(mockVersions);
  }, []);

  // 搜索和过滤逻辑
  useEffect(() => {
    let result = versions;
    
    // 应用搜索
    if (searchQuery) {
      const query = searchQuery.toLowerCase();
      result = result.filter(version => 
        version.versionNumber.toLowerCase().includes(query) ||
        version.description.toLowerCase().includes(query) ||
        version.platform.toLowerCase().includes(query)
      );
    }
    
    // 应用过滤
    if (activeFilter === 'active') {
      result = result.filter(version => version.isActive);
    } else if (activeFilter === 'inactive') {
      result = result.filter(version => !version.isActive);
    }
    
    setFilteredVersions(result);
    setCurrentPage(1); // 重置到第一页
  }, [searchQuery, activeFilter, versions]);

  // 分页逻辑
  const indexOfLastItem = currentPage * itemsPerPage;
  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
  const currentVersions = filteredVersions.slice(indexOfFirstItem, indexOfLastItem);
  const totalPages = Math.ceil(filteredVersions.length / itemsPerPage);

  // 处理表单输入变化
  const handleInputChange = (e) => {
    const { name, value, type, checked } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: type === 'checkbox' ? checked : value
    }));
  };

  // 打开上传对话框
  const handleOpenUploadDialog = () => {
    setFormData({
      versionNumber: '',
      description: '',
      isActive: false,
      forceUpdate: false,
      downloadUrl: '',
      fileSize: '',
      releaseDate: new Date().toISOString().split('T')[0]
    });
    setShowUploadDialog(true);
  };

  // 打开编辑对话框
  const handleOpenEditDialog = (version) => {
    setSelectedVersion(version);
    setFormData({
      versionNumber: version.versionNumber,
      description: version.description,
      isActive: version.isActive,
      forceUpdate: version.forceUpdate,
      downloadUrl: version.downloadUrl,
      fileSize: version.fileSize,
      releaseDate: version.releaseDate
    });
    setShowEditDialog(true);
  };

  // 上传新版本
  const handleUploadVersion = () => {
    // 表单验证
    if (!formData.versionNumber || !formData.description) {
      showNotification('请填写版本号和描述', 'error');
      return;
    }

    const newVersion = {
      id: Date.now().toString(),
      ...formData,
      downloadCount: 0,
      platform: formData.downloadUrl?.endsWith('.apk') ? 'Android' : 'iOS'
    };

    // 更新版本列表
    setVersions(prev => [newVersion, ...prev]);
    setShowUploadDialog(false);
    showNotification('版本上传成功', 'success');
  };

  // 更新版本
  const handleUpdateVersion = () => {
    // 表单验证
    if (!formData.versionNumber || !formData.description) {
      showNotification('请填写版本号和描述', 'error');
      return;
    }

    // 更新版本
    setVersions(prev => prev.map(version => 
      version.id === selectedVersion.id
        ? { ...version, ...formData }
        : version
    ));
    setShowEditDialog(false);
    showNotification('版本更新成功', 'success');
  };

  // 删除版本
  const handleDeleteVersion = (versionId) => {
    if (window.confirm('确定要删除这个版本吗？此操作不可撤销。')) {
      setVersions(prev => prev.filter(version => version.id !== versionId));
      showNotification('版本删除成功', 'success');
    }
  };

  // 切换版本状态
  const toggleVersionStatus = (versionId) => {
    setVersions(prev => prev.map(version => 
      version.id === versionId
        ? { ...version, isActive: !version.isActive }
        : version
    ));
  };

  // 设置为最新版本
  const setAsLatestVersion = (versionId) => {
    setVersions(prev => prev.map(version => ({
      ...version,
      isActive: version.id === versionId
    })));
    showNotification('已设置为最新版本', 'success');
  };

  // 显示通知
  const showNotification = (message, severity = 'success') => {
    setNotification({ show: true, message, severity });
    setTimeout(() => {
      setNotification(prev => ({ ...prev, show: false }));
    }, 3000);
  };

  // 处理文件上传预览
  const handleFileUpload = (event) => {
    const file = event.target.files[0];
    if (file) {
      // 模拟文件上传，实际应用中会上传到服务器
      const fileSize = (file.size / (1024 * 1024)).toFixed(2) + ' MB';
      setFormData(prev => ({
        ...prev,
        fileSize,
        downloadUrl: URL.createObjectURL(file) // 临时URL，实际应用中会是服务器返回的URL
      }));
    }
  };

  return (
    <Container>
      <ContentWrapper>
        <PageHeader>
          <PageTitle>APP版本管理</PageTitle>
          <UploadButton 
            variant="contained" 
            startIcon={<Upload size={16} />}
            onClick={handleOpenUploadDialog}
          >
            上传新版本
          </UploadButton>
        </PageHeader>

        <ControlsBar>
          <SearchBar>
            <SearchIcon />
            <SearchInput
              type="text"
              placeholder="搜索版本号、描述或平台..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
            />
          </SearchBar>
          <FilterButton 
            variant="outlined" 
            startIcon={<Filter size={16} />}
            onClick={() => {
              const filters = ['all', 'active', 'inactive'];
              const currentIndex = filters.indexOf(activeFilter);
              const nextIndex = (currentIndex + 1) % filters.length;
              setActiveFilter(filters[nextIndex]);
            }}
          >
            状态: {activeFilter === 'all' ? '全部' : activeFilter === 'active' ? '启用' : '禁用'}
            <ChevronDown size={16} />
          </FilterButton>
        </ControlsBar>

        {currentVersions.length > 0 ? (
          <>
            <TableContainer>
              <Table>
                <TableHeader>
                  <tr>
                    <TableHeaderCell>版本号</TableHeaderCell>
                    <TableHeaderCell>平台</TableHeaderCell>
                    <TableHeaderCell>描述</TableHeaderCell>
                    <TableHeaderCell>发布日期</TableHeaderCell>
                    <TableHeaderCell>文件大小</TableHeaderCell>
                    <TableHeaderCell>下载次数</TableHeaderCell>
                    <TableHeaderCell>状态</TableHeaderCell>
                    <TableHeaderCell>强制更新</TableHeaderCell>
                    <TableHeaderCell align="center">操作</TableHeaderCell>
                  </tr>
                </TableHeader>
                <tbody>
                  {currentVersions.map(version => (
                    <TableRow key={version.id} className={version.isActive ? 'highlight' : ''}>
                      <TableCell>
                        <div style={{ fontWeight: '500' }}>{version.versionNumber}</div>
                      </TableCell>
                      <TableCell>{version.platform}</TableCell>
                      <TableCell style={{ maxWidth: '300px' }}>
                        <div style={{ whiteSpace: 'normal', wordBreak: 'break-word' }}>{version.description}</div>
                      </TableCell>
                      <TableCell>{version.releaseDate}</TableCell>
                      <TableCell>{version.fileSize}</TableCell>
                      <TableCell>{version.downloadCount}</TableCell>
                      <TableCell>
                        <StatusBadge isActive={version.isActive}>
                          {version.isActive ? '启用' : '禁用'}
                        </StatusBadge>
                      </TableCell>
                      <TableCell>
                        <FormControlLabel
                          control={
                            <Switch
                              checked={version.forceUpdate}
                              onChange={() => handleUpdateVersion({...version, forceUpdate: !version.forceUpdate})}
                              disabled
                            />
                          }
                          label={version.forceUpdate ? '是' : '否'}
                        />
                      </TableCell>
                      <TableCell style={{ textAlign: 'center' }}>
                        <Tooltip title="下载">
                          <ActionButton 
                            onClick={() => window.open(version.downloadUrl, '_blank')}
                            color="#007bff"
                            hoverColor="#0056b3"
                          >
                            <Download size={18} />
                          </ActionButton>
                        </Tooltip>
                        <Tooltip title="编辑">
                          <ActionButton 
                            onClick={() => handleOpenEditDialog(version)}
                            color="#28a745"
                            hoverColor="#218838"
                          >
                            <Edit size={18} />
                          </ActionButton>
                        </Tooltip>
                        <Tooltip title={version.isActive ? '禁用' : '启用'}>
                          <ActionButton 
                            onClick={() => toggleVersionStatus(version.id)}
                            color={version.isActive ? '#dc3545' : '#28a745'}
                            hoverColor={version.isActive ? '#c82333' : '#218838'}
                          >
                            {version.isActive ? <X size={18} /> : <Check size={18} />}
                          </ActionButton>
                        </Tooltip>
                        {!version.isActive && (
                          <Tooltip title="设为最新版本">
                            <ActionButton 
                              onClick={() => setAsLatestVersion(version.id)}
                              color="#ffc107"
                              hoverColor="#e0a800"
                            >
                              <ArrowUpCircle size={18} />
                            </ActionButton>
                          </Tooltip>
                        )}
                        <Tooltip title="删除">
                          <ActionButton 
                            onClick={() => handleDeleteVersion(version.id)}
                            color="#6c757d"
                            hoverColor="#545b62"
                          >
                            <Trash2 size={18} />
                          </ActionButton>
                        </Tooltip>
                      </TableCell>
                    </TableRow>
                  ))}
                </tbody>
              </Table>
            </TableContainer>

            <Pagination>
              <PaginationInfo>
                显示 {indexOfFirstItem + 1} 到 {Math.min(indexOfLastItem, filteredVersions.length)} 条，共 {filteredVersions.length} 条
              </PaginationInfo>
              <PaginationControls>
                <PaginationButton 
                  disabled={currentPage === 1}
                  onClick={() => setCurrentPage(prev => prev - 1)}
                >
                  上一页
                </PaginationButton>
                {[...Array(totalPages)].map((_, index) => (
                  <PaginationButton
                    key={index + 1}
                    active={currentPage === index + 1}
                    onClick={() => setCurrentPage(index + 1)}
                  >
                    {index + 1}
                  </PaginationButton>
                ))}
                <PaginationButton 
                  disabled={currentPage === totalPages}
                  onClick={() => setCurrentPage(prev => prev + 1)}
                >
                  下一页
                </PaginationButton>
              </PaginationControls>
            </Pagination>
          </>
        ) : (
          <EmptyState>
            <EmptyStateIcon>
              <FileText size={48} />
            </EmptyStateIcon>
            <EmptyStateTitle>暂无版本数据</EmptyStateTitle>
            <EmptyStateDescription>
              {searchQuery || activeFilter !== 'all' 
                ? '没有找到匹配的版本信息，请尝试调整搜索条件。'
                : '还没有上传任何版本，请点击"上传新版本"按钮开始上传。'
              }
            </EmptyStateDescription>
            {!searchQuery && activeFilter === 'all' && (
              <Button 
                variant="contained" 
                color="primary"
                onClick={handleOpenUploadDialog}
              >
                上传第一个版本
              </Button>
            )}
          </EmptyState>
        )}

        <div style={{ marginTop: 24, textAlign: 'center' }}>
          <button 
            onClick={() => navigate('/admin/dashboard')}
            style={{
              display: 'flex',
              alignItems: 'center',
              gap: 8,
              margin: '0 auto',
              padding: '10px 20px',
              backgroundColor: '#f0f0f0',
              border: 'none',
              borderRadius: '6px',
              fontSize: '14px',
              cursor: 'pointer'
            }}
          >
            <LayoutDashboard size={16} />
            返回仪表盘
          </button>
        </div>
      </ContentWrapper>

      {/* 上传新版本对话框 */}
      <Dialog open={showUploadDialog} onClose={() => setShowUploadDialog(false)} maxWidth="md" fullWidth>
        <DialogTitle>上传新版本</DialogTitle>
        <DialogContent>
          <div style={{ padding: '16px 0' }}>
            <input 
              type="file" 
              accept=".apk,.ipa" 
              onChange={handleFileUpload}
              style={{ marginBottom: '16px' }}
            />
            
            <TextField
              fullWidth
              label="版本号"
              name="versionNumber"
              value={formData.versionNumber}
              onChange={handleInputChange}
              margin="normal"
              required
            />
            
            <TextField
              fullWidth
              label="描述"
              name="description"
              value={formData.description}
              onChange={handleInputChange}
              margin="normal"
              multiline
              rows={3}
              required
            />
            
            <TextField
              fullWidth
              label="下载链接"
              name="downloadUrl"
              value={formData.downloadUrl}
              onChange={handleInputChange}
              margin="normal"
            />
            
            <TextField
              fullWidth
              label="发布日期"
              name="releaseDate"
              type="date"
              value={formData.releaseDate}
              onChange={handleInputChange}
              margin="normal"
              InputLabelProps={{ shrink: true }}
            />
            
            <FormControlLabel
              control={
                <Switch
                  name="isActive"
                  checked={formData.isActive}
                  onChange={handleInputChange}
                />
              }
              label="设为当前版本"
              style={{ marginTop: '16px' }}
            />
            
            <FormControlLabel
              control={
                <Switch
                  name="forceUpdate"
                  checked={formData.forceUpdate}
                  onChange={handleInputChange}
                />
              }
              label="强制更新"
              style={{ marginTop: '8px' }}
            />
            
            {formData.forceUpdate && (
              <div style={{ 
                display: 'flex', 
                alignItems: 'center', 
                gap: '8px', 
                marginTop: '8px', 
                padding: '8px 12px', 
                backgroundColor: '#fff3cd', 
                borderRadius: '4px',
                color: '#856404'
              }}>
                <AlertTriangle size={16} />
                <span>强制更新将要求所有用户必须更新到这个版本才能继续使用应用</span>
              </div>
            )}
          </div>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setShowUploadDialog(false)}>取消</Button>
          <Button onClick={handleUploadVersion} variant="contained" color="primary">
            上传版本
          </Button>
        </DialogActions>
      </Dialog>

      {/* 编辑版本对话框 */}
      <Dialog open={showEditDialog} onClose={() => setShowEditDialog(false)} maxWidth="md" fullWidth>
        <DialogTitle>编辑版本信息</DialogTitle>
        <DialogContent>
          <div style={{ padding: '16px 0' }}>
            <TextField
              fullWidth
              label="版本号"
              name="versionNumber"
              value={formData.versionNumber}
              onChange={handleInputChange}
              margin="normal"
              required
            />
            
            <TextField
              fullWidth
              label="描述"
              name="description"
              value={formData.description}
              onChange={handleInputChange}
              margin="normal"
              multiline
              rows={3}
              required
            />
            
            <TextField
              fullWidth
              label="下载链接"
              name="downloadUrl"
              value={formData.downloadUrl}
              onChange={handleInputChange}
              margin="normal"
            />
            
            <TextField
              fullWidth
              label="文件大小"
              name="fileSize"
              value={formData.fileSize}
              onChange={handleInputChange}
              margin="normal"
              disabled
            />
            
            <TextField
              fullWidth
              label="发布日期"
              name="releaseDate"
              type="date"
              value={formData.releaseDate}
              onChange={handleInputChange}
              margin="normal"
              InputLabelProps={{ shrink: true }}
            />
            
            <FormControlLabel
              control={
                <Switch
                  name="isActive"
                  checked={formData.isActive}
                  onChange={handleInputChange}
                />
              }
              label="设为当前版本"
              style={{ marginTop: '16px' }}
            />
            
            <FormControlLabel
              control={
                <Switch
                  name="forceUpdate"
                  checked={formData.forceUpdate}
                  onChange={handleInputChange}
                />
              }
              label="强制更新"
              style={{ marginTop: '8px' }}
            />
            
            {formData.forceUpdate && (
              <div style={{ 
                display: 'flex', 
                alignItems: 'center', 
                gap: '8px', 
                marginTop: '8px', 
                padding: '8px 12px', 
                backgroundColor: '#fff3cd', 
                borderRadius: '4px',
                color: '#856404'
              }}>
                <AlertTriangle size={16} />
                <span>强制更新将要求所有用户必须更新到这个版本才能继续使用应用</span>
              </div>
            )}
          </div>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setShowEditDialog(false)}>取消</Button>
          <Button onClick={handleUpdateVersion} variant="contained" color="primary">
            保存修改
          </Button>
        </DialogActions>
      </Dialog>

      {/* 通知提示 */}
      <Snackbar 
        open={notification.show} 
        autoHideDuration={3000}
        onClose={() => setNotification(prev => ({ ...prev, show: false }))}
        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
      >
        <Alert 
          onClose={() => setNotification(prev => ({ ...prev, show: false }))}
          severity={notification.severity}
          sx={{ width: '100%' }}
        >
          {notification.message}
        </Alert>
      </Snackbar>
    </Container>
  );
};

export default VersionManagement;